<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="keywords" content="#">
    <meta name="description" content="#">
    <title>途羊旅游网</title>
    <!-- Fav and touch icons -->
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/images/favicon.ico">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="assets/images/favicon.ico">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="assets/images/favicon.ico">
    <link rel="apple-touch-icon-precomposed" href="assets/images/favicon.ico">
    <link rel="shortcut icon" href="assets/images/favicon.ico">
    <!-- Bootstrap -->
    <link href="assets/css/bootstrap.min.css" rel="stylesheet">
    <!-- Fontawesome -->
    <link href="assets/css/font-awesome.css" rel="stylesheet">
    <!-- Flaticons -->
    <link href="assets/css/font/flaticon.css" rel="stylesheet">
    <!-- Slick Slider -->
    <link href="assets/css/slick.css" rel="stylesheet">
    <!-- Range Slider -->
    <link href="assets/css/ion.rangeSlider.min.css" rel="stylesheet">
    <!-- Datepicker -->
    <link href="assets/css/datepicker.css" rel="stylesheet">
    <!-- magnific popup -->
    <link href="assets/css/magnific-popup.css" rel="stylesheet">
    <!-- Nice Select -->
    <link href="assets/css/nice-select.css" rel="stylesheet">
    <!-- Custom Stylesheet -->
    <link href="assets/css/style.css" rel="stylesheet">
    <!-- Custom Responsive -->
    <link href="assets/css/responsive.css" rel="stylesheet">
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet">
    <!-- CSS for IE -->
    <!--[if lte IE 9]>
        <link rel="stylesheet" type="text/css" href="css/ie.css" />
    <![endif]-->   
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script type='text/javascript' src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
      <script type='text/javascript' src="http://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.js"></script>
    <![endif]-->
    <!-- place -->
    
<style type="text/css">
.roomlist .favorate-room .soloroom {
 			padding-bottom: 22px;
}

.roomlist .roomcard {
	display: flex;
	width: 100%;
}

.roomlist .roompanel {
	border-right: 1px solid #dadfe6;
	flex: auto;
	max-width: 145px;
	width: 145px;
}

.roomlist .roompanel-pic {
	width: 121px;
	height: 86px;
	position: relative;
	cursor: pointer;
}
			
.roomlist .roompanel-pic>div {
    position: absolute;
}
.m-img {
    display: inline-flex;
    opacity: 1;
    transition: all .45s cubic-bezier(.645,.045,.355,1) 0s;
    justify-content: center;
    align-items: center;
}


element.style {
}
.roomlist .roomname {
    font-weight: 600;
    font-size: 14px;
    color: #0f294d;
    line-height: 18px;
    padding: 4px 0;
}

div {
    display: block;
}
.roomlist .seeroom {
    padding-bottom: 12px;
    font-size: 12px;
    color: #287dfa;
    line-height: 12px;
    text-align: left;
    font-weight: 600;
    cursor: pointer;
}

.roomlist .saleroomlist {
    width: 786px;
    flex: auto;
}

.roomlist .favorate-room .salecardlist-rooms .salecard {
    border-bottom: none;
    padding-bottom: 0;
    padding-top: 22px;
}

.salecard-flex {
    display: flex;
}

.salecard-people {
    width: 206px;
    padding-right: 16px;
    box-sizing: border-box;
}

.salecard-people .people-box {
    display: flex;
}

.salecard-people .people-box .adult {
    width: 70px;
}

.salecard .des-with-icon {
    padding-bottom: 2px;
}

.des-with-icon {
    display: inline-block;
    color: #455873;
    vertical-align: middle;
}

.des-with-icon .normal-icon {
    
    margin-right: 4px;
    display: inline-flex;
    align-items: center;
}

.des-with-icon .desc-text {
    vertical-align: top;
    line-height: 18px;
}

.des-with-icon {
    display: inline-block;
    color: #455873;
    vertical-align: middle;
}

.salecard .des-with-icon {
    padding-bottom: 2px;
}

.des-with-icon {
    display: inline-block;
    color: #455873;
    vertical-align: middle;
}

.salecard-people .people-box .adult {
    width: 70px;
}

.salecard-people .people-box .bedfacility {
    flex: 1;
}
.salecard .bed {
    margin-bottom: 6px;
}

.salecard .bed-content {
    display: inline-block;
    font-size: 14px;
    line-height: 18px;
    vertical-align: baseline;
    color: #0f294d;
}

.salecard span.underline {
    border-bottom: 1px dotted;
    cursor: pointer;
}

.salecard .bed-content {
    
    font-size: 14px;
    line-height: 18px;
    
    color: #0f294d;
}
.salecard .facility {
    display: block;
    margin-bottom: 4px;
}

.salecard-otherfacility {
    width: 86px;
    padding-right: 16px;
    box-sizing: border-box;
}

.salecard-policy {
    width: 229px;
    padding-right: 16px;
    box-sizing: border-box;
}

.promotion {
    width: 147px;
    padding-right: 16px;
    box-sizing: border-box;
}

.salecard-price {
    display: flex;
    justify-content: flex-end;
    flex: 1;
}

.roomname{
	margin-left:66px;
}

.book{
	margin-right:66px;
}

.card{
	padding-top:11px;

}

</style>
</head>
<body>
    <!-- Start Header -->
    <header class="header">
        <!-- Topbar -->
        <div class="topbar bg-custom-blue">
            <div class="container">
                <div class="row">
                    <div class="col-sm-6">
                        <div class="left-side">
                            <ul class="custom-flex">
                                <li>
                                    <a href="#" class="text-custom-white">
                                        <i class="fab fa-facebook-f"></i>
                                    </a>
                                </li>
                                <li>
                                    <a href="#" class="text-custom-white">
                                        <i class="fab fa-twitter"></i>
                                    </a>
                                </li>
                                <li>
                                    <a href="#" class="text-custom-white">
                                        <i class="fab fa-instagram"></i>
                                    </a>
                                </li>
                                <li>
                                    <a href="#" class="text-custom-white">
                                        <i class="fab fa-linkedin"></i>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-sm-6">
                        <div class="right-side">
                            <ul class="custom-flex" id="custom-flex">
                                <li>
                                    <a href="#" class="text-custom-white">登录</a>
                                </li>
                                <li>
                                    <a href="#" class="text-custom-white">注册</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Topbar -->
        <!-- Navigation -->
        <div class="navigation">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <div class="main-navigation">
                            <div class="logo">
                                <a href="index.html">
                                     <img src="assets/images/toor-logo.png" class="img-fluid image-fit" alt="img">
                                </a>
                            </div>
                                      <div class="main-menu">
                                <div class="logo">
                                    <a href="index.html">
                                        <img src="assets/images/toor-logo.png" class="img-fluid image-fit" alt="img">
                                    </a>
                                </div>
                                <nav>
                                    <ul class="custom-flex">
                                        <li class="menu-item">
                                            <a href="index.jsp" class="text-light-dark">首页</a>
                                            
                                        </li>
                                        <li class="menu-item active">
                                            <a href="rooms-hotels.jsp" class="text-light-dark">酒店</a>
                                            
                                        </li>
                                        <li class="menu-item ">
                                            <a href="scenic.jsp" class="text-light-dark">景点</a>
                                            
                                        </li>
                                        
                                        <li class="menu-item">
                                            <a href="order.jsp" class="text-light-dark">我的订单</a>
                                        </li>
                                        <li class="menu-item">
                                            <a href="gallery.jsp" class="text-light-dark">我的收藏</a>
                                            
                                        </li>
                                        <li class="menu-item">
                                            <a href="person-center.jsp" class="text-light-dark">个人中心</a>
                                           
                                        </li>
                                    </ul>
                                </nav>
                                
                            </div>
                            <div class="hamburger-menu">
                                <div class="menu-btn">
                                    <span></span>
                                    <span></span>
                                    <span></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Navigation -->
    </header>
    <!-- End Header -->
    <!-- Start Subheader -->
    <div class="subheader normal-bg section-padding">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <h1 class="text-custom-white">Hotel Detail</h1>
                    <ul class="custom-flex justify-content-center">
                        <li class="fw-500">
                            <a href="index.jsp" class="text-custom-white">Home</a>
                        </li>
                        <li class="fw-500">
                            <a href="rooms-hotels.jsp" class="text-custom-white">酒店</a>
                        </li>
                        <li class="active fw-500">
                            	酒店详情
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- End Subheader -->
    <!-- Start Listing detail -->
    <section class="section-padding bg-light-white listing-details">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <div class="listing-details-inner bx-wrapper bg-custom-white padding-20">
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="detail-slider-for mb-xl-20 magnific-gallery">
                                	
                                	<!-- 酒店的多个图片 -->
                                    <div class="slide-item">
                                        <a href="../HotelFileDownloadServlet?fileName=<%= request.getParameter("hotelPicture")%>" class="popup">
                                            <img src="../HotelFileDownloadServlet?fileName=<%= request.getParameter("hotelPicture")%>" class="image-fit" alt="img">
                                        </a>
                                    </div>
                                    <div class="slide-item">
                                        <a href="../HotelFileDownloadServlet?fileName=<%= request.getParameter("hotelPicture")%>" class="popup">
                                            <img src="../HotelFileDownloadServlet?fileName=<%= request.getParameter("hotelPicture")%>" class="image-fit" alt="img">
                                        </a>
                                    </div>
                                    <div class="slide-item">
                                        <a href="../HotelFileDownloadServlet?fileName=<%= request.getParameter("hotelPicture")%>" class="popup">
                                            <img src="../HotelFileDownloadServlet?fileName=<%= request.getParameter("hotelPicture")%>" class="image-fit" alt="img">
                                        </a>
                                    </div>
                                    <div class="slide-item">
                                        <a href="../HotelFileDownloadServlet?fileName=<%= request.getParameter("hotelPicture")%>" class="popup">
                                            <img src="../HotelFileDownloadServlet?fileName=<%= request.getParameter("hotelPicture")%>" class="image-fit" alt="img">
                                        </a>
                                    </div>
                                    <div class="slide-item">
                                        <a href="../HotelFileDownloadServlet?fileName=<%= request.getParameter("hotelPicture")%>" class="popup">
                                            <img src="../HotelFileDownloadServlet?fileName=<%= request.getParameter("hotelPicture")%>" class="image-fit" alt="img">
                                        </a>
                                    </div>
                                    <!-- <div class="slide-item">
                                        <a href="assets/images/hotels/slide_2.jpg" class="popup">
                                            <img src="assets/images/hotels/slide_2.jpg" class="image-fit" alt="img">
                                        </a>
                                    </div>
                                    <div class="slide-item">
                                        <a href="assets/images/hotels/slide_3.jpg" class="popup">
                                            <img src="assets/images/hotels/slide_3.jpg" class="image-fit" alt="img">
                                        </a>
                                    </div>
                                    <div class="slide-item">
                                        <a href="assets/images/hotels/slide_4.jpg" class="popup">
                                            <img src="assets/images/hotels/slide_4.jpg" class="image-fit" alt="img">
                                        </a>
                                    </div>
                                    <div class="slide-item">
                                        <a href="assets/images/hotels/slide_5.jpg" class="popup">
                                            <img src="assets/images/hotels/slide_5.jpg" class="image-fit" alt="img">
                                        </a>
                                    </div> -->
                                </div>
                                <div class="detail-slider-nav row">
                                    <div class="slide-item col-12">
                                        <img src="../HotelFileDownloadServlet?fileName=<%= request.getParameter("hotelPicture")%>" class="image-fit" alt="img">
                                    </div>
                                    <div class="slide-item col-12">
                                        <img src="../HotelFileDownloadServlet?fileName=<%= request.getParameter("hotelPicture")%>" class="image-fit" alt="img">
                                    </div>
                                    <div class="slide-item col-12">
                                        <img src="../HotelFileDownloadServlet?fileName=<%= request.getParameter("hotelPicture")%>" class="image-fit" alt="img">
                                    </div>
                                    <div class="slide-item col-12">
                                        <img src="../HotelFileDownloadServlet?fileName=<%= request.getParameter("hotelPicture")%>" class="image-fit" alt="img">
                                    </div>
                                    <div class="slide-item col-12">
                                        <img src="../HotelFileDownloadServlet?fileName=<%= request.getParameter("hotelPicture")%>" class="image-fit" alt="img">
                                    </div>
                                    <!-- <div class="slide-item col-12">
                                        <img src="assets/images/hotels/slide_2s.jpg" class="image-fit" alt="img">
                                    </div>
                                    <div class="slide-item col-12">
                                        <img src="assets/images/hotels/slide_3s.jpg" class="image-fit" alt="img">
                                    </div>
                                    <div class="slide-item col-12">
                                        <img src="assets/images/hotels/slide_4s.jpg" class="image-fit" alt="img">
                                    </div>
                                    <div class="slide-item col-12">
                                        <img src="assets/images/hotels/slide_5s.jpg" class="image-fit" alt="img">
                                    </div> -->
                                </div>
                                <hr>
                                
                                
                                <div class="listing-meta-sec mb-md-80">
                                    <div class="tabs">
                                        <ul class="custom-flex nav nav-tabs mb-xl-20">
                                        	<li class="nav-item">
                                                <a class="nav-link" data-toggle="tab" href="#faqs">房型列表</a>
                                            </li>
                                            <li class="nav-item">
                                                <a class="nav-link" data-toggle="tab" href="#amenities">酒店评论</a>
                                            </li>
                                            <li class="nav-item">
                                                <a class="nav-link active" data-toggle="tab" href="#overview">酒店概览</a>
                                            </li>
                                        </ul>
                                        <div class="tab-content">
                                            <div class="tab-pane fade active show" id="overview">
                                                <div class="tab-inner">
                                                    <div class="row">
                                                        <div class="col-md-5">
                                                            <div class="hotel-type mb-xl-20 bg-light-white padding-10">
                                                                <ul class="custom">
                                                                    <li class="text-light-dark" ><label class="no-margin text-custom-blue">酒店星级:</label><span id="hotel-star">4 star</span></li>
                                                                    <li class="text-light-dark"><label class="no-margin text-custom-blue">多人是否收费:</label>多人不收费</li>
                                                                    <li class="text-light-dark"><label class="no-margin text-custom-blue">最少停留:</label>1晚</li>
                                                                    <li class="text-light-dark"><label class="no-margin text-custom-blue">押金:</label>￥2000</li>
                                                                    <li class="text-light-dark"><label class="no-margin text-custom-blue">国家:</label>中国</li>
                                                                    <li class="text-light-dark"><label class="no-margin text-custom-blue">能否退订:</label>不能</li>
                                                                </ul>
                                                            </div>
                                                        </div>
                                                        <div class="col-md-7">
                                                            <div class="listing-testimonial padding-20 bg-light-white mb-xl-20">
                                                                <div class="testimonial-inner detail-testimonial">
                                                                    <div class="tesimonial-item">
                                                                    	<!-- 推荐用户观看的评论 -->
                                                                        <cite class="text-custom-blue fs-16">酒店就在南京路步行街中心，步行去外滩10分钟，位置实在太便利了，入住跟前台要求安排东方明珠景色的房间，对于我这个要求高的酒店达人来说，房间绝对值得入住，当时20000元入住简直捡到了，强烈推荐！</cite>
                                                                        <div class="testimonial-author">
                                                                            <div class="author-img">
                                                                                <img src="assets/images/blog/comment_1.jpg" class="rounded-circle" alt="img">
                                                                            </div>
                                                                            <div class="author-name ml-2">
                                                                                <h6 class="text-custom-black no-margin fs-14 fw-500">张家辉</h6>
                                                                                <p class="no-margin text-light-dark">游客</p>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="tesimonial-item">
                                                                        <cite class="text-custom-blue fs-16">问了前台之后说没有了，超级失落。前台小哥哥看我心情瞬间变差，查看了房源后，免费给我升级到25层房间，望出去刚好可以看到明珠塔。炒鸡棒炒鸡棒！结果一天基本上都窝在酒店里了。一定要cue前台小哥哥，长得帅，服务好。</cite>
                                                                        <div class="testimonial-author">
                                                                            <div class="author-img">
                                                                                <img src="assets/images/blog/comment_2.jpg" class="rounded-circle" alt="img">
                                                                            </div>
                                                                            <div class="author-name ml-2">
                                                                                <h6 class="text-custom-black no-margin fs-14 fw-500">余文乐</h6>
                                                                                <p class="no-margin text-light-dark">Auscow Milk Pumper</p>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div class="tesimonial-item">
                                                                        <cite class="text-custom-blue fs-16">房费加押金交了1000，说没收到，就又交了一笔1000，扫两次码我这边显示都支付成功了，前台说没支付成功一会就能自动退款！回到房间就给银行打电话，说两笔1000都支付成功了，这位前台真是太不专业了</cite>
                                                                        <div class="testimonial-author">
                                                                            <div class="author-img">
                                                                                <img src="assets/images/blog/comment_2.jpg" class="rounded-circle" alt="img">
                                                                            </div>
                                                                            <div class="author-name ml-2">
                                                                                <h6 class="text-custom-black no-margin fs-14 fw-500">蒋劲夫</h6>
                                                                                <p class="no-margin text-light-dark">拳击手</p>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                        
                                                        
                                                        <!-- About Hilton Hotel and Resorts 酒店简介 -->
                                                        <div class="col-12">
                                                            <div class="information">
                                                                <h4 class="text-custom-black">酒店简介</h4>
                                                                <p class="text-light-dark" id="hotel-description">Sed aliquam nunc eget velit imperdiet, in rutrum mauris malesuada. Quisque ullamcorper vulputate nisi, et fringilla ante convallis quis. Nullam vel tellus non elit suscipit volutpat. Integer id felis et nibh rutrum dignissim ut non risus. In tincidunt urna quis sem luctus, sed accumsan magna pellentesque. Donec et iaculis tellus. Vestibulum ut iaculis justo, auctor sodales lectus. Donec et tellus tempus, dignissim maurornare, consequat lacus. Integer dui neque, scelerisque nec sollicitudin sit amet, sodales a erat. Duis vitae condimentum ligula. Integer eu mi nisl. Donec massa dui, commodo id arcu quis, venenatis scelerisque velit.</p>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            
                                            <!-- 酒店评论模块 -->
                                            <div class="tab-pane fade" id="amenities">
                                                <div class="post-author mb-xl-20" id="hotelComment" style="height:600px;overflow:auto;">
                                       				<div class="author-img animate-img">
                                            			<a href="#">
                                                			<img style="width:80px;height:80px;" src="assets/images/blog/author-img.png" class="rounded-circle" alt="#">
                                                			<span class="text-theme fs-14">用户名</span>
                                            			</a>
                                        			</div>
                                         			<p class="text-light-dark">
                                        				评论内容
                                    				</p>
                                    			</div>
                                    			<div class="form-group" style="margin-top:40px;margin-left:20px;" >
                             						<input style="width:300px;float:left;" type="text" name="#" class="form-control form-control-custom" placeholder="写评论..." id="inputHotelComment">
                             						<button id="publishHotelComment" style="width:100px;float:left;margin-left:5px;" type="button" class="btn-first btn-submit full-width btn-height" style="margin-top:15px;">发布</button> 
                        						</div>
                                            </div>
                                            
                                            
                                            <div class="tab-pane fade" id="faqs">
                                                <div id="accordion" class="custom-accordion">
                                                	
                                                	<!-- 单个客房起始处 -->
                                                    <div class="card">
                                                        <div class="card-header" id="headingOne">
                                                            <div class="roomcard soloroom">
																<div class="roompanel">
																	<div class="roompanel-pic">
																		<div class="m-img " style="width: 100%; height: 100%;">
																			<div style="background-repeat: no-repeat; background-size: cover; background-position: center center; width: 100%; font-family: PingFangSC-Regular; color: rgb(255, 255, 255); font-size: 12px; text-align: center; height: 100%; background-image: url(&quot;//ak-d.tripcdn.com/images/200i050000000lrbvE8FC_R_400_400_R5_D.jpg_.webp&quot;);"><img src="http://ak-d.tripcdn.com/images/200i050000000lrbvE8FC_R_400_400_R5_D.jpg_.webp" /></div>
																		</div>
																	</div>
																	<div class="roomname">高级大床房</div>
																</div>
																<div class="saleroomlist">
																	<div class="salecardlist-rooms">
																		<div class="ubt-salecard salecard tripbasic-wrapper one-room" data-conan-sale-room="" ubt-baseroomid="807565" ubt-roomid="275361233">
																			<div class="salecard-flex">
																				<div class="salecard-people">
																					<div class="people-box">
																						<div class="adult">
																							<div class="des-with-icon"><i class="u-icon u-icon-ic_new_fa_occupant normal-icon" type="ic_new_fa_occupant" style="font-size: 18px; height: 18px;"></i><span class="desc-text" style="font-size: 14px;"></span></div>
																							<div class="des-with-icon"><i class="u-icon u-icon-ic_new_fa_occupant normal-icon" type="ic_new_fa_occupant" style="font-size: 18px; height: 18px;"></i><span class="desc-text" style="font-size: 14px;"></span></div>
																						</div>
																						<div class="bedfacility">
																							<div class="bed">
																								<div class="bed-content"><span class="underline">大床</span></div>
																							</div>
																							<div class="facility">
																								<div class="des-with-icon" style="color: rgb(15, 41, 77);"><span class="desc-text underline" style="font-size: 14px;">无餐食</span></div>
																							</div>
																						</div>
																					</div>
																				</div>
																				<div class="salecard-otherfacility">
																					<div class="facility">
																						<div class="des-with-icon" style="color: rgb(15, 41, 77);"><span class="desc-text" style="font-size: 14px;">禁烟</span></div>
																					</div>
																					<div class="facility">
																						<div class="des-with-icon"><span class="desc-text" style="font-size: 14px;">有窗</span></div>
																					</div>
																				</div>
																				<div class="salecard-policy">
																					<div class="policy">
																						<div class="des-with-icon green" style="align-items: flex-start;"><span class="desc-text green" style="font-size: 14px;">免费取消</span></div>
																					</div>
																					<div class="policy">
																						<div class="des-with-icon green" style="align-items: flex-start;"><span class="desc-text green underline underline-green" style="font-size: 14px;">立即确认</span></div>
																					</div>
																				</div>
																				<div class="promotion">
																					<div class="promotion-ctrip">
																						<div><span class="promotion-ctrip-tag promotion-ctrip-tag-hover">芜湖旅游自营专享</span></div>
																					</div>
																				</div>
																				<div class="salecard-price">
																					<div class="salecard-price-panel">
																						<div class="price">
																							<span class="price-delete">￥590</span>
																						</div>
																					</div>
																					<div class="salecard-price-button">
																						<div class="book-box">
																							<div class="book">&nbsp;预订</div>
																						</div>
																					</div>
																				</div>
																			</div>
																		</div>
																	</div>
																</div>
															</div>
															<!-- 单个客房结尾处 -->
                                                 
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-lg-4" style="margin-top:20px;">
                                <div class="row">
                                    <div class="col-12">
                                        <div class="quick-quote bx-wrapper padding-20 mb-xl-30">
                                            <h5 class="text-custom-black"><%= request.getParameter("hotelName")%></h5>
                                            <form>
                                                <div class="row">
                                                    <div class="col-12">
                                                        <div class="form-group">
                                                            <label class="fs-14 text-custom-black fw-500" id="hotel-address">Your Destination</label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </form>
                                            <h6 class="text-custom-black">酒店联系电话</h6>
                                            <h6 id="hotel-contact-phone"></h6>
                                        </div>
                                        
                                       
                                        
                                        <!-- 客房列表、客房评论、酒店概览三个下面的一层 -->
                                        <div class="need-help bx-wrapper padding-20">
                                            <h5 class="text-custom-black">需要帮助吗?.</h5>
                                            <p class="text-light-dark">芜湖旅游网7*24小时在您身边.</p>
                                            <ul class="custom">
                                                <li class="text-custom-blue fs-18">
                                                    <i class="fas fa-phone-alt"></i>
                                                    <a href="#" class="text-light-dark">0592-88888888</a>
                                                </li>
                                                <li class="text-custom-blue fs-18">
                                                    <i class="fas fa-envelope"></i>
                                                    <a href="#" class="text-light-dark fs-14">18888888888</a>
                                                </li>
                                            </ul>
                                        </div>
                                        
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- End Listing detail -->
   
    <!-- Start Footer -->
    <footer class="section-padding footer">
        <div class="container">
            <div class="row">
                <div class="col-lg-3 col-md-6">
                    <div class="footer-box mb-md-40">
                        <h4 class="text-custom-white fw-600">About Us</h4>
                        <p class="text-custom-white">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
                        <p class="text-custom-white">
                            Lorem Ipsum is simply dummy text of the printing and typesetting industry...
                        </p>
                        <ul class="custom-flex socials">
                            <li><a href="#" class="text-custom-white fs-14"><i class="fab fa-facebook-f"></i></a></li>
                            <li><a href="#" class="text-custom-white fs-14"><i class="fab fa-twitter"></i></a></li>
                            <li><a href="#" class="text-custom-white fs-14"><i class="fab fa-linkedin"></i></a></li>
                            <li><a href="#" class="text-custom-white fs-14"><i class="fab fa-youtube"></i></a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6">
                    <div class="footer-box mb-md-40">
                        <h4 class="text-custom-white fw-600">Quick Links</h4>
                        <ul class="custom links">
                            <li>
                                <a href="#" class="text-custom-white">Home</a>
                            </li>
                            <li>
                                <a href="#" class="text-custom-white">Hotels</a>
                            </li>
                            <li>
                                <a href="#" class="text-custom-white">Flights</a>
                            </li>
                            <li>
                                <a href="#" class="text-custom-white">Cruise</a>
                            </li>
                            <li>
                                <a href="#" class="text-custom-white">Blog</a>
                            </li>
                            <li>
                                <a href="#" class="text-custom-white">404</a>
                            </li>
                            <li>
                                <a href="#" class="text-custom-white">Contact Us</a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6">
                    <div class="footer-box mb-sm-40">
                        <h4 class="text-custom-white fw-600">Instagram</h4>
                        <ul class="custom instagram " style="position: relative; height: 204px;">
                            <li style="position: absolute; left: 0px; top: 0px;">
                                <a href="#" class="text-custom-white popup">
                                    <img src="assets/images/gallery/g_gal_1.jpg" class="image-fit" alt="img">
                                </a>
                            </li>
                            <li style="position: absolute; left: 84.1406px; top: 0px;">
                                <a href="#" class="text-custom-white popup">
                                    <img src="assets/images/gallery/g_gal_2.jpg" class="image-fit" alt="img">
                                </a>
                            </li>
                            <li style="position: absolute; left: 168.281px; top: 0px;">
                                <a href="#" class="text-custom-white popup">
                                    <img src="assets/images/gallery/g_gal_3.jpg" class="image-fit" alt="img">
                                </a>
                            </li>
                            <li style="position: absolute; left: 0px; top: 68px;">
                                <a href="#" class="text-custom-white popup">
                                    <img src="assets/images/gallery/g_gal_4.jpg" class="image-fit" alt="img">
                                </a>
                            </li>
                            <li style="position: absolute; left: 84.1406px; top: 68px;">
                                <a href="#" class="text-custom-white popup">
                                    <img src="assets/images/gallery/g_gal_5.jpg" class="image-fit" alt="img">
                                </a>
                            </li>
                            <li style="position: absolute; left: 168.281px; top: 68px;">
                                <a href="#" class="text-custom-white popup">
                                    <img src="assets/images/gallery/g_gal_6.jpg" class="image-fit" alt="img">
                                </a>
                            </li>
                            <li style="position: absolute; left: 0px; top: 136px;">
                                <a href="#" class="text-custom-white popup">
                                    <img src="assets/images/gallery/g_gal_7.jpg" class="image-fit" alt="img">
                                </a>
                            </li>
                            <li style="position: absolute; left: 84.1406px; top: 136px;">
                                <a href="#" class="text-custom-white popup">
                                    <img src="assets/images/gallery/g_gal_8.jpg" class="image-fit" alt="img">
                                </a>
                            </li>
                            <li style="position: absolute; left: 168.281px; top: 136px;">
                                <a href="#" class="text-custom-white popup">
                                    <img src="assets/images/gallery/g_gal_9.jpg" class="image-fit" alt="img">
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6">
                    <div class="footer-box mb-sm-40">
                        <h4 class="text-custom-white fw-600">Newsletter</h4>
                        <div class="newsletter">
                            <p class="text-custom-white">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </footer>
    <!-- End Footer -->
    <!-- Start Copyright -->
    <div class="copyright">
        <div class="container">
            <div class="row">
                <div class="col-12">
                    <p class="text-custom-white">Copyright &copy; 2020.Company name All rights reserved.</p>
                </div>
            </div>
        </div>
    </div>
    <!-- End Copyright -->
    <div id="back-top" class="back-top">
      <a href="#top"><i class="flaticon-arrows"></i></a>
    </div>
    <!-- Place all Scripts Here -->
    <!-- jQuery -->
    <script src="assets/js/jquery.min.js"></script>
    <!-- Popper -->
    <script src="assets/js/popper.min.js"></script>
    <!-- Bootstrap -->
    <script src="assets/js/bootstrap.min.js"></script>
    <!-- Range Slider -->
    <script src="assets/js/ion.rangeSlider.min.js"></script>
    <!-- Slick Slider -->
    <script src="assets/js/slick.min.js"></script>
    <!-- Datepicker -->
    <script src="assets/js/datepicker.js"></script>
    <script src="assets/js/datepicker.en.js"></script>
    <!-- Isotope Gallery -->
    <script src="assets/js/isotope.pkgd.min.js"></script>
    <!-- Nice Select -->
    <script src="assets/js/jquery.nice-select.js"></script>
    <!-- magnific popup -->
    <script src="assets/js/jquery.magnific-popup.min.js"></script>
    <!-- Maps -->
    <!-- <script src="https://ditu.google.cn/maps/api/js?key=AIzaSyDnd9JwZvXty-1gHZihMoFhJtCXmHfeRQg"></script> -->
    <!-- Custom Js -->
    <script src="assets/js/custom.js"></script>
    <!-- /Place all Scripts Here -->
    
    <script type="text/javascript">
    	
    	$(document).ready(function(){
    		
    		//显示用户名和用户图片
			var user ="${sessionScope.user}";
			if(user!=""&&"${sessionScope.user.userPicture}"==null){
				$("#custom-flex").html("<li><img src=\"${pageContext.request.contextPath}/assets/images/dahaigui.jpg\"><li><li>用户名："+"${sessionScope.user.userName}"+"</li>");
			}else if(user!=""&&"${sessionScope.user.userPicture}"!=null){
				$("#custom-flex").html("<li><img style=\"width:30px;height:30px;  \" src=\"${pageContext.request.contextPath}/FileDownloadServlet?fileName="+
						"${sessionScope.user.userPicture}"+"\"><li>"+
						"<li>用户名："+"${sessionScope.user.userName}"+
						"<span style=\"margin-left:60px;cursor:pointer;\" id=\"btnLogout\">退出登录</span>"+
						"</li>");
			}else if(user==""){
				$("#custom-flex").html("<li><a href=\"userLogin.jsp\" class=\"text-custom-white\">登录</a></li>"+
						"<li><a href=\"register.jsp\" class=\"text-custom-white\">注册</a></li>");
			}
    		sendAJAX();
    		getHotelMessageAJAX();
    		showHotelComment();
    	});
    	
		// 根据酒店Id请求该酒店下的所有的客房    	
    	function sendAJAX(){

    		var hotelId = <%= request.getParameter("hotelId")%>;
    		
    		$.ajax({
   	 		 async:true,
   	 		 type:"get",
   	 		 url:"${pageContext.request.contextPath}/RoomServlet",
   	 		 data:{
   	 			 op:"searchRoomsByHotelId",
   	 			 hotelId:hotelId
   	 		 },
   	 		 dataType:"json",
   	 		 success:function(result){
   	 			// 调用渲染函数
				console.log(result);
   	 		 	var content = "";
   	 		 	for(var i = 0;i < result.length;i++){
   	 		 	var room = result[i];
   	 		 	content += "<div class=\"card\">"+
				                "<div class=\"card-header\" id=\"headingOne\">"+
				                "<div class=\"roomcard soloroom\">"+
									"<div class=\"roompanel\">"+
										"<div class=\"roompanel-pic\">"+
											"<div class=\"m-img\" style=\"width: 100%; height: 100%;\">"+
												"<div style=\"background-repeat: no-repeat; background-size: cover; background-position: center center; width: 100%; font-family: PingFangSC-Regular; color: rgb(255, 255, 255); font-size: 12px; text-align: center; height: 100%; background-image: url(&quot;../HotelFileDownloadServlet?fileName="+room.roomPicture+"&quot;);\"><img src=\"../HotelFileDownloadServlet?fileName="+room.roomPicture+"\" /></div>"+
											"</div>"+
										"</div>"+
										"<div class=\"roomname\">"+room.roomName+"</div>"+
									"</div>"+
									"<div class=\"saleroomlist\">"+
										"<div class=\"salecardlist-rooms\">"+
											"<div class=\"ubt-salecard salecard tripbasic-wrapper one-room\" data-conan-sale-room=\"\" ubt-baseroomid=\"807565\" ubt-roomid=\"275361233\">"+
												"<div class=\"salecard-flex\">"+
													"<div class=\"salecard-people\">"+
														"<div class=\"people-box\">"+
															"<div class=\"adult\">"+
																"<div class=\"des-with-icon\"><i class=\"u-icon u-icon-ic_new_fa_occupant normal-icon\" type=\"ic_new_fa_occupant\" style=\"font-size: 18px; height: 18px;\"></i><span class=\"desc-text\" style=\"font-size: 14px;\"></span></div>"+
																"<div class=\"des-with-icon\"><i class=\"u-icon u-icon-ic_new_fa_occupant normal-icon\" type=\"ic_new_fa_occupant\" style=\"font-size: 18px; height: 18px;\"></i><span class=\"desc-text\" style=\"font-size: 14px;\"></span></div>"+
															"</div>"+
															"<div class=\"bedfacility\">"+
																"<div class=\"bed\">"+
																	"<div class=\"bed-content\"><span class=\"underline\">"+room.roomType+"</span></div>"+
																"</div>"+
																"<div class=\"facility\">"+
																	"<div class=\"des-with-icon\" style=\"color: rgb(15, 41, 77);\"><span class=\"desc-text underline\" style=\"font-size: 14px;\">无餐食</span></div>"+
																"</div>"+
															"</div>"+
														"</div>"+
													"</div>"+
													"<div class=\"salecard-otherfacility\">"+
														"<div class=\"facility\">"+
															"<div class=\"des-with-icon\" style=\"color: rgb(15, 41, 77);\"><span class=\"desc-text\" style=\"font-size: 14px;\">禁烟</span></div>"+
														"</div>"+
														"<div class=\"facility\">"+
															"<div class=\"des-with-icon\"><span class=\"desc-text\" style=\"font-size: 14px;\">有窗</span></div>"+
														"</div>"+
													"</div>"+
													"<div class=\"salecard-policy\">"+
														"<div class=\"policy\">"+
															"<div class=\"des-with-icon green\" style=\"align-items: flex-start;\"><span class=\"desc-text green\" style=\"font-size: 14px;\">免费取消</span></div>"+
														"</div>"+
														"<div class=\"policy\">"+
															"<div class=\"des-with-icon green\" style=\"align-items: flex-start;\"><span class=\"desc-text green underline underline-green\" style=\"font-size: 14px;\">立即确认</span></div>"+
														"</div>"+
													"</div>"+
													"<div class=\"promotion\">"+
														"<div class=\"promotion-ctrip\">"+
															"<div><span class=\"promotion-ctrip-tag promotion-ctrip-tag-hover\">芜湖旅游自营专享</span></div>"+
														"</div>"+
													"</div>"+
													"<div class=\"salecard-price\">"+
														"<div class=\"salecard-price-panel\">"+
															"<div class=\"price\">"+
																"<span class=\"price-delete\">￥ "+room.roomPrice+"</span>"+
															"</div>"+
														"</div>"+
														"<div class=\"salecard-price-button\">"+
															"<div class=\"book-box\">"+
																"<div class=\"book\">&nbsp;预订</div>"+
															"</div>"+
														"</div>"+
													"</div>"+
												"</div>"+
											"</div>"+
										"</div>"+
									"</div>"+
								"</div>";
   	 		
   	 		 	}
   	 		 $("#accordion").html(content);
   	 		 },
   	 		 error:function(){
   	 			 alert("异步请求失败!");
   	 		 }
   	 	 });
   		}
    	
		// 根据酒店Id请求该酒店的所有信息
    	function getHotelMessageAJAX(){
    		var hotelId = <%= request.getParameter("hotelId")%>;
    		
    		$.ajax({
      	 		 async:true,
      	 		 type:"get",
      	 		 url:"${pageContext.request.contextPath}/HotelServlet",
      	 		 data:{
      	 			 op:"getHotelById",
      	 			 hotelId:hotelId
      	 		 },
      	 		 dataType:"json",
      	 		 success:function(result){
      	 			// 调用渲染函数
   					console.log(result);
      	 		 	$("#hotel-star").text(result[0].hotelStar);
      	 		 	$("#hotel-address").text(result[0].hotelAddress);
      	 		 	$("#hotel-address-1").val(result[0].hotelAddress);
      	 		 	$("#hotel-description").text(result[0].hotelDesc);
      	 		 	$("#hotel-contact-phone").text(result[0].hotelPhone);
      	 		 },
      	 		 error:function(){
      	 			 alert("异步请求失败!");
      	 		 }
      	 	 });
    	}


    	function showHotelComment(){
    		var hotelIdValue = <%= request.getParameter("hotelId")%>
    		//显示酒店评论信息   		
	   		 $.ajax({
	   			 async:true,
	   			 type:"get",
	   			 url:"${pageContext.request.contextPath}/HotelCommentServlet",
	   			 data:{
	   			 },
	   			 dataType:"json",
	   			 success:function(result){
	   				// 调用渲染函数
	   				 var content="";
	   					//没有数据
	   					if(result.length==0){
	   						$("#testimonialFor").html("");
	   					}else{
	   						for(var i=0;i<result.length;i++){
	   							
	   							if(hotelIdValue==result[i].hotelId){
	   								content += "<div class=\"author-img animate-img\">"+
	   	                            "<img style=\"width:50px;height:50px;\" src=\"${pageContext.request.contextPath}/FileDownloadServlet?fileName="+result[i].user.userPicture+"  \" class=\"rounded-circle\" alt=\"#\">"+
	   	                            "<span style=\"margin-left:15px;color:black;font-size:15px;\" class=\"text-theme fs-14\">"+result[i].user.userName+"</span>"+
	   	                            "<span style=\"float:right;margin-top:15px;\" class=\"text-theme fs-14\">"+result[i].commentDatetime.substring(0,19)+"</span>"+
	   	                    "</div>"+
	   	                     "<p style=\"margin-left:15px;margin-top:15px;\" class=\"text-light-dark\">"+result[i].commentContent+"</p>";
	   							}
	   					}
	   					
	   				}
	   					$("#hotelComment").html(content);
	   			 },
	   			 error:function(){
	   				 alert("异步请求失败!");
	   			 }
	   		 });
    	}
    	
    	
    	//发表评论信息
		$("#publishHotelComment").click(function(){
			var commentContent = $("#inputHotelComment").val();
			var hotelIdValue = <%= request.getParameter("hotelId")%>
			
			var date = new Date();
			var year = date.getFullYear();
			var month = date.getMonth()+1;
			var day = date.getDay()+1;
			var hour = date.getHours();
			var minute = date.getMinutes();
			var second = date.getSeconds();
			
			var showTime = year+"/"+month+"/"+day+" "+hour+":"+minute+":"+second;
			
			console.log(showTime);
			 $.ajax({
				 async:true,
				 type:"get",
				 url:"${pageContext.request.contextPath}/HotelCommentServlet",
				 data:{
					 op:"publishComment",
					 commentContent: commentContent,
					 commentDatetime:showTime, 
					 userId:"${sessionScope.user.userId}",
					 hotelId:hotelIdValue
				 },
				 dataType:"json",
				 success:function(result){
					 $("#inputHotelComment").val("");
					// 调用渲染函数
					 var content="";
						//没有数据
						if(result.length==0){
							$("#testimonialFor").html("");
						}else{
							for(var i=0;i<result.length;i++){
								if(hotelIdValue==result[i].hotelId){
									content += "<div >"+
									"<div \" class=\"author-img animate-img\">"+
		                            "<img style=\"width:50px;height:50px;\" src=\"${pageContext.request.contextPath}/FileDownloadServlet?fileName="+result[i].user.userPicture+"  \" class=\"rounded-circle\" alt=\"#\">"+
		                            "<span style=\"margin-left:15px;color:black;font-size:15px;\" class=\"text-theme fs-14\">"+result[i].user.userName+"</span>"+
		                            "<span style=\"float:right;margin-top:15px;\" class=\"text-theme fs-14\">"+result[i].commentDatetime+"</span>"+
		                    "</div>"+
		                     "<p style=\"margin-left:15px;margin-top:15px;\" class=\"text-light-dark\">"+result[i].commentContent+"</p>"+
		                     "</div>";
							}
						}
						
					}
						console.log(content);
						$("#hotelComment").html(content);
				 },
				 error:function(){
					 alert("异步请求失败!");
				 }
			 });
		});
    </script>
    
    
    
    
</body>
</html>